import jQuery from 'jquery'
window.jQuery = window.$ = jQuery
import 'popper.js'
import 'bootstrap'

import http from 'axios'


Promise.all([http({
  url: 'https://gank.io/api/v2/categories/Girl'
}), http({
  url: 'https://gank.io/api/v2/categories/Article'
})]).then(res => {
  let menuData = []
  res.forEach((item) => {
    const { data } = item.data
    menuData = [...menuData, ...data]
  })

  menuData.forEach((item) => {
    const { title } = item
    // console.log(item)
    jQuery(`<li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">${title}</a>
        </li>`).appendTo('.my-menu')
  })
}).catch(e => {
  console.log(e)
})

// list html

let page = 1
let count = 20

let hasNextPage = true

const getArticles = function(type = 'All') {
  console.log(type,page)
  http({
    url: `https://gank.io/api/v2/data/category/Girl/type/${type}/page/${page}/count/${count}`
  }).then(res => {
    if (res.data.length < count) {
      hasNextPage = false
    }
    const {data} = res.data
    console.info(res.data)
    console.log(data)
    data.forEach((item) => {
      console.log(item)
      const { images, desc, title, _id: id } = item
      jQuery(`<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
      <div class="card">
        <img src="${images[0]}" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">${title}</h5>
          <p class="card-text">${desc}</p>
          <a href="./article.html?id=${id}" class="btn btn-primary">查看详情</a>
        </div>
      </div>
    </div>`).appendTo('.my-list')
    })
  }).catch(e => {
    console.log(e)
  }).finally(() => {
    console.log('ok!')
  })

}

getArticles()
let type = 'All'

$('.my-menu').on('click', 'a', function () {
  page = 1
  hasNextPage = true
  type = $(this).data('type')
  getArticles(type)
})


$('.next-page').on('click', function () {
  $('.my-list').html('')
  if (hasNextPage) {
    page += 1
    getArticles(type)
  } else {
    alert('没有更多数据了')
  }

})

$('.prev-page').on('click', function () {
  $('.my-list').html( '' )
  if (page <= 1) {
    alert('不能再上一页了')
  } else {
    page -= 1
    getArticles(type)
  }
})



http({
  method: 'GET',
  url: 'https://gank.io/api/v2/banners',
}).then((res) => {
  // success
  const { data } = res.data
  console.log(data)
  data.forEach(item => {
    const {image,title} =item
    jQuery(`
            <div class="carousel-item ">
            <img src="${image}" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <p>${title}</p>
            </div>
          </div>`).appendTo('.my-banner').addClass('active').siblings().removeClass('active')

  })
}).catch(e => {
  // error
  console.log(e)
  
}).finally(() => {
  console.log('已完成')
})


jQuery('.suiji').on('click',() => {
  http({
    method: 'GET',
    url: `https://gank.io/api/v2/data/category/Girl/type/Girl/page/1/count/50`,
  }).then((res) => {
    // success
    const { data } = res.data
    console.log(data)
    let num=Math.round((Math.random()+0.01)*50)
    const media = document.querySelector('.media')
    media.style.backgroundImage = `url(${data[num].url})`
    const time = document.querySelector('.right .list-content .list-body a span')
    console.log(time)
    time.innerHTML = data[num].title


  }).catch(e => {
    // error
    console.log(e)

  }).finally(() => {
    console.log('已完成')
  })



})